<html>
<head>
	<title>Recall</title>
	<link rel="stylesheet" type="text/css" href="style/style.css">
	<link rel="stylesheet" type="text/css" href="style/table.css">
	<link rel="stylesheet" type="text/css" href="style/validationEngine.jquery.css">
	
	<script type="text/javascript" src="script/jquery/jquery.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.xml.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.xmldom.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.dataTables.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.validationEngine-en.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="script/jquery/jquery.timer.js"></script>
	
	<script type="text/javascript" src="script/general.js"></script>
	<script type="text/javascript" src="script/messages.js"></script>
	<script type="text/javascript" src="script/config.js"></script>
	<script type="text/javascript" src="script/model.js"></script>
	<script type="text/javascript" src="script/control.js"></script>
	<script type="text/javascript" src="script/ui.js"></script>
	<script type="text/javascript" src="script/widget.js"></script>
</head>
<body>
	<div id="dockedView" class="view">
			<div class="top">
				<div class="controlTooltip"></div>
				<div class="controlBarContainer">
					<div class="menuBox menuControlBox">
						<ul id="dockedViewControlBar" class="menuList controlBar">
						</ul>
					</div>
				</div>
			</div>
			<div id="dockedViewContainer" class="contentContainer">
				<div id="dockedViewContent">
					<form>
						<fieldset>
							<legend>Challengeable units</legend>
							<p>
								<select id="unitSelector">
								</select>
							</p>
						</fieldset>
					</form>
				 </div>
			</div>
			<div class="bottom"></div>
	</div>
	
	<div id="configView" class="view">
		<div class="top">
			<h2 class="viewTitle">Settings</h2>
			<div class="controlTooltip"></div>
			<div class="controlBarContainer">
				<div class="menuBox menuControlBox">
					<ul id="configViewControlBar" class="menuList controlBar">
					</ul>
				</div>
			</div>
		</div>
		<div id="configViewContainer" class="contentContainer">
			<div id="configViewContent">
				<form>
					<fieldset>
						<legend>Units</legend>
						<p>
							<label for="unitList" class="test">Units:</label>
							<select id="unitList"></select>
						</p>
						<p>
							<div class="menuBox unitListControlBarMenuBox">
								<ul class="menuList unitListControlBar">
									<li id="removeUnit" class="removeButton button"></li>
									<li id="editUnit" class="editButton button"></li>
									<li id="addUnit" class="addButton button"></li>
								</ul>
							</div>
						</p>
					</fieldset>
					<fieldset>
						<legend>Auto challenge</legend>
						<p>
							<label for="autoChallengeTime">Time:</label>
							<input id="autoChallengeTime" type="text"> min(s) (1..1440)
						</p>
						<p>
							<label for="autoHide">Auto-hide:</label>
							<input id="autoHide" type="checkbox">
							Hide the widget between two challenges.
						</p>
						
					</fieldset>
					<p class="buttomFormButtons">
						<button type="button" id="saveConfig" class="button">OK</button>
					</p>
				</form>
			</div>
		</div>
		<div class="bottom"></div>
	</div>
	
	<div id="unitEditView" class="view">
		<div class="top">
			<h2 class="viewTitle">Unit settings</h2>
			<div class="controlTooltip"></div>
			<div class="controlBarContainer">
				<div class="menuBox menuControlBox">
					<ul id="unitEditViewControlBar" class="menuList controlBar">
					</ul>
				</div>
			</div>
		</div>
		<div id="unitEditViewContainer" class="contentContainer">
			<div id="unitEditViewContent">
				<form>
					<fieldset>
						<legend>General</legend>
						<p>
							<label for="unitName">Unit name:</label>
							<input type="text" id="unitName" name="unitName" />
						</p>
						
						<p>
							<label for="unitType">Unit type:</label>
							<select id="unitType" name="unitName">
							</select>
						</p>
					</fieldset>
					<fieldset id="fileStoreConfigPanel" class="configPanel">
            		<legend>File store</legend>
						<p>
							<label for="fileName">File:</label>
							<input type="text" id="fileName" name="fileName" />
							<button id="fileChooser" type="button">...</button>
						</p>
					
					</fieldset>
					<p class="buttomFormButtons">
						<button id="listQuestions" name="listQuestions" type="button" class="button">Questions</button>					
						<button id="saveUnit" name="saveUnit" type="button" class="button">Save</button>
					</p>
				</form>
			</div>
		</div>
		<div class="bottom"></div>
	</div>
	
	<div id="questionListView" class="view">
		<div class="top">
			<h2 class="viewTitle">Questions</h2>
			<div class="controlTooltip"></div>
			<div class="controlBarContainer">
				<div class="menuBox menuControlBox">
					<ul id="questionListViewControlBar" class="menuList controlBar">
					</ul>
				</div>
			</div>
		</div>
		<div id="questionListViewContainer" class="contentContainer">
			<div id="questionListViewContent">
				<form>
					<fieldset>
						<legend>Available questions</legend>
						<div id="answerListContainer">
							<table cellpadding="0" cellspacing="0" border="0" class="display" id="answerList">
								<thead>
									<tr>
										<th>no.</th>
										<th>Question</th>
										<th>Answer</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<p>
								<div class="menuBox questionListControlBarMenuBox">
									<ul class="menuList unitListControlBar">
										<li id="removeQuestion" class="removeButton button"></li>
										<li id="modifyQuestion" class="editButton button"></li>
										<li id="addQuestion" class="addButton button"></li>
									</ul>
								</div>
							</p>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
		<div class="bottom"></div>
	</div>	
	
	<div id="questionView" class="view">
		<div class="top">
			<h2 class="viewTitle">Question</h2>
			<div class="controlTooltip"></div>
			<div class="controlBarContainer">
				<div class="menuBox menuControlBox">
					<ul id="questionViewControlBar" class="menuList controlBar">
					</ul>
				</div>
			</div>
		</div>
		<div id="questionViewContainer" class="contentContainer">
			<div id="questionViewContent">
				<form>
					<fieldset>
						<legend>Question</legend>
						<p>
							<label for="question">Question:</label>
							<textarea id="question" name="question"></textarea>
						</p>
						<p>					
							<label for="answers">Answers (line separated):</label>
							<textarea id="answers" name="answers"></textarea>
						</p>
					</fieldset>
					<p class="buttomFormButtons">
						<button id="saveQuestion" type="button" class="button">Save</button>
					</p>
				</form>
			</div>
		</div>
		<div class="bottom"></div>
	</div>
	
	<div id="challengeView" class="view">
		<div class="top">
			<h2 class="viewTitle">Memorize</h2>
			<div class="controlTooltip"></div>
			<div class="controlBarContainer">
				<div class="menuBox menuControlBox">
					<ul id="challengeViewControlBar" class="menuList controlBar">
					</ul>
				</div>
			</div>
		</div>
		<div id="challengeViewContainer" class="contentContainer">
			<div id="challengeViewContent">
			
				<form>
					<fieldset>
						<legend>Statistics</legend>
						<p>Correct: <span id="correct"></span>, Wrong: <span id="wrong"></span></p>
					</fieldset>
					<fieldset>
						<legend>Challenge</legend>
						<p>
							<label for="challenge">Question:</label>
							<textarea id="challenge" name="challenge"></textarea>
						</p>
						<p>					
							<label for="answer">Answer:</label>
							<input id="answer" name="answer" type="text" />
						</p>
						<div id="resultContainer">
							<p>
								<label for="correctAnswers">Correct answers:</label>
								<textarea id="correctAnswers" name="correctAnswers"></textarea>
							</p>
						</div>
					</fieldset>
					<p class="buttomFormButtons">
						<button id="checkAnswer" type="button" class="button">Check</button>
						<button id="nextChallenge" type="button" class="button">Next</button>
						<button id="stopChallenge" type="button" class="button">Stop challenge</button>
						<button id="closeChallenge" type="button" class="button">Close</button>
					</p>
				</form>
			
			</div>
		</div>
		<div class="bottom"></div>
	</div>
	
	
  </body>
</html>
